<template>
  <div class="Establish">
    <el-dialog title="创建节目" :visible.sync="EstablishDialog" :width="this.$store.getters.offsetWidth">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="节目名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="屏属性设置" style="position: relative;">
          <el-select v-model="form.region" placeholder="请选择" style="width:55%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <div class="ifpass">
            <div
              :class="isPass==false?'':'addClass'"
              style="color: #4d9ce0;height: 39px;box-sizing: border-box;float: left;width: 50%;background-color: #f2faff;border: 1px solid #4d9ce0;"
              @click="isPassClick"
            >竖屏</div>
            <div
              :class="isPass==true?'':'addClass'"
              style="color: #4d9ce0;height: 39px;box-sizing: border-box;float: left;width: 50%;background-color: #f2faff;border: 1px solid #4d9ce0;"
              @click="isPassClick"
            >横屏</div>
          </div>
        </el-form-item>
        <el-form-item class="formButton">
          <el-button style="background-color: #4d9ce0;color: #fff" @click="onSubmit">确 定</el-button>
          <el-button>删 除</el-button>
        </el-form-item>
      </el-form>
      <div>
        <h3 style="font-weight: 400;color:#333;">
          注意
          <span style="color:red">*</span>
        </h3>
        <div class="footText">
            一键生成的节目都是全屏模式，只针对图片与视频素材并且是审核通过的，只选一
            个素材时播放时长可调整，选择多个素材时，图片素材默认都为10s，视频素材为
            视频本身时长。
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      EstablishDialog: false,
      isPass: true,
      form: {
        name: "",
        region: "",
        desc: ""
      }
    };
  },
  methods: {
    isPassClick() {
      this.isPass = !this.isPass;
    },
    onSubmit() {}
  }
};
</script>



<style lang="stylus" scoped>
.Establish {
  .footText {
    background-color: #fafafa;
    padding: 10px;
    border-top: 1px solid #ccc;
    line-height: 25px;
    color: #999999;
    font-size: 14px;
  }
  .ifpass {
    position: absolute;
    right: 0;
    top: 0;
    width: 40%;
    cursor: pointer;
    margin: 0 0 0 20px;
    text-align: center;
  }
  .addClass {
    background-color: #4d9ce0 !important;
    color: #fff !important;
  }
  .formButton {
    text-align: center;
    padding-right: 10%;
    padding-top: 40px;
    .el-button {
      width: 100px;
    }
  }
  .opinion {
    /deep/.el-form-item__label {
      height: 80px;
      line-height: 80px;
    }
  }
  /deep/.el-textarea__inner {
    height: 80px;
  }
  /deep/.el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
  /deep/.el-form-item__label {
    background-color: #efefef;
    border-radius: 0;
    height: 40px;
    border: 1px solid #dcdfe6;
    border-right: none;
    box-sizing: border-box;
    text-align: center;
    padding-left: 10px;
  }
  /deep/.el-input__inner,
  /deep/.el-textarea__inner {
    border-radius: 0;
  }
}
</style>
